<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>会员登录 - ${site.name}</title>
    <link href="/${res}/css/login-register.css" rel="stylesheet">

    <link href="/${res}/style.css" rel="stylesheet">
    <link href="/${res}/css/color.css" rel="stylesheet">
    <link href="/${res}/css/responsive.css" rel="stylesheet">
    <!-- <link href="/${res}/css/login-register.css" rel="stylesheet">-->
    <script src="${resSys}/jquery.js" type="text/javascript"></script>
    <script src="${resSys}/front.js" type="text/javascript"></script>
    <script type="text/javascript" src="${resSys}/TimerButton.js"></script>
    <script src="${resSys}/common.js"></script>
    <script src="${resSys}/Popt.js"></script>
    <script src="${resSys}/citySet.js"></script>
    <!--[if lt IE 9]>
    <script src="/${res}/js/html5shiv.min.js"></script>
    <script src="/${res}/js/respond.min.js"></script>
    <![endif]-->

    <script type="text/javascript">
        $(function() {
            $("#city").hide();
            $("#loginForm").validate();
            $("#registerForm").validate();
            $("#guestbookCaptcha").bind("click", function(){
                $(this).attr("src","${base}/captcha.svl?d="+Math.random());
            });
            $("input:radio[name='optionsRadios']").click(function(){
                if($(this).val() == 2){
                    $("#invitationCode").show();
                }else{
                    $("#invitationCode").hide();
                    $("#invitationCode").parent().find("label").remove();
                }
            });
        });

        function refreshCaptcha() {
            $("#guestbookCaptcha").attr("src","${base}/captcha.svl?d="+Math.random());
            $.ajax({
                url: "${base}/phone_exists.jspx",
                type: "POST",
                dataType:"json",
                data: {username : $("#username1").val()},
                success: function (data) {
                    $("#username1").parent().find("label").remove();
                    if(data.flag){
                        var str = $("<label for=\"username\" generated=\"true\" class=\"error\">手机号码已经注册！</label>");
                        $("#username1").parent().append(str); //将动态创建的str元素追加到ul下面
                    }
                }
            });
        }

        //根据邀请函获取企业信息
        function getEnterprise(object) {
            $("#branch").val('');
            $("#city").val('');
            $.ajax({
                url: "${base}/findEnterpriseByInvite.jspx",
                type: "POST",
                dataType:"json",
                data: {invitationCode : $(object).val()},
                success: function (data) {
                    $("#invitationCode").parent().find("label").remove();
                    if(!data.flag){
                        var str = $("<label for=\"invitationCode\" generated=\"true\" class=\"error\">" + data.errorMsg + "</label>");
                        $("#invitationCode").parent().append(str); //将动态创建的str元素追加到ul下面
                        $("#city").hide();
                    }else{
                        $("#city").show();
                        var enName = data.enName;
                        var branchList = data.branchList;
                        if(branchList && branchList.length>0){
                            $("#city").click(function (e) {
                                SelCity(this,e,branchList);
                            });
                        }
                    }
                }
            });
        }
    </script>
    <script type="text/javascript">
        $(function (){
            /*TimerButton是一个对象，该对象中有两个方法，一个是SecondCountDown，该方法的作用是精确倒计时。普通的使用setInterval倒计时会存在一定的偏差，特别是当我们切换窗口时，而SecondCountDown解决了这个误差问题（具体用法见timedown.html）。
             另一个方法是verify，该方法的作用是实现按钮倒计时的功能，有了这个按钮倒计时就可以实现获取验证码倒计时的功能*/
            console.log(timerButton);

            var btn = $("#getSmCode1");
            timerButton.verify_("#getSmCode1", {
                time: 60,//倒计时时间
                event: "click",//事件触发方式
                //执行条件，可以是function也可以是Boolean值，如果是函数则需返回true才会执行
                condition: function () {
                    var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9{1}]))+\d{8})$/,
                        flag = phoneReg.test($("#username1").val());
                    if(!flag){
                        //$("#username").parent().append('电话号码填写不正确');
                        var str = $("<label for=\"username1\" generated=\"true\" class=\"error\">电话号码为空或者格式填写不正确</label>");
                        $("#username1").parent().append(str); //将动态创建的str元素追加到ul下面
                        return false;
                    }
                    return true;
                },
                unableClass: "unabled",//按钮不能使用时的class
                runningText: " s后重新获取",//计时正在进行中时按钮显示的文字
                timeUpText: "重新获取",//时间到了时按钮显示的文字
                progress: function (time) {//计时正在进行中时的回调
                    btn.html(time + " s后重新获取");
                    console.log(this);//这里的this指向按钮
                    console.log(this.timedown);//这个timedown就是计时器
                },
                timeUp: function (time) {//计时结束时执行的回调
                    btn.html("重新获取");
                    console.log("时间到了！");
                    console.log(this);//这里的this指向按钮
                },
                abort: function () {//中断计时
                    btn.html("重新获取");
                    console.log("我被中断了！");
                    console.log(this);//这里的this指向按钮
                },
                eventFn: function () {//事件执行后的回调
                    console.log(this);
                    console.log("执行了");
                    $.ajax({
                        url: "${base}/smCode_validate.jspx",
                        type: "POST",
                        dataType:"json",
                        data: {phone : $("#username1").val(), smType: "1"},
                        success: function (data) {
                            $("#validateCode").val(data.smCode);
                        }
                    });
                    console.log(this);//这里的this指向按钮
                }
            });

        });
    </script>
</head>

<body style="background-color:#f7f7f7;">
[#include "../include/nav2.html"/]

<!--Sub Banner Wrap Start -->
<div class="gt_sub_banner_bg default_width">
    <div class="container">
        <div class="gt_sub_banner_hdg  default_width">
            <h2>Login &#38; Register</h2>
            <h6>Welcome To Educskill</h6>
        </div>
    </div>
</div>
<!--Sub Banner Wrap End -->
<!--Breadcrumb Wrap End -->
<div class="gt_breadcrumb_bg default_width">
    <div class="container">
        <div class="gt_breadcrumb_wrap default_width">
            <ul>
                <li><a href="${base}">首页</a></li>
                <li><a href="${base}/register.jspx"> 注册</a></li>
            </ul>
        </div>
    </div>
</div>
<!--Breadcrumb Wrap End -->

<div class="gt_content_wrap">
    <section>
        <div class="container">
            <div class="gt_lgin_tab_wrap">
                <ul class="gt_login_link" data-tabs="tabs">
                    <a href="#"></a>
                    <li class=""><a data-toggle="tab" href="#register" aria-expanded="false">注册</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane " id="register">
                        <form id="registerForm" action="${base}/register.jspx" method="post">
                            <div class="gt_login_des_wrap default_width" id="registerDiv">
                                <div class="gt_login_radio_btn">
                                    <label><span></span>
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="1" checked style="margin-left:20px"> 个人用户注册
                                    </label>
                                    <label><span></span>
                                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="2" style="margin-left:50px"> 企业用户注册
                                    </label>
                                </div>
                                <div class="gt_login_field"><p style="color:red;">全部为必填项</p></div>
                                <div class="gt_login_field">
                                    <input type="text" id="username1" placeholder="手机号" onchange="refreshCaptcha();" vld="{required:true,rangelength:[${site.usernameMinLen},12],username:true,remote:'phone_unique.jspx',messages:{remote:'手机号已存在'}}" name="username">
                                    <span><i class="fa fa-phone"></i></span>
                                </div>
                                <div class="gt_login_field">
                                    <input type="text" id="invitationCode" name="invitationCode" onchange="getEnterprise(this);" class="required" style="display: none" placeholder="请输入邀请码">
                                    <span><i class="fa fa-thumbs-up"></i></span>
                                </div>
                                <!-- 代码 开始 -->
                                <div class="gt_login_field">
                                    <span><i class="fa fa-coffee"></i></span>
                                    <ul data-role="listview">
                                        <li >
                                            <input type="text" id="city"  class="required" style="display: none" readonly placeholder="请选择组织架构" >
                                            <input type="hidden" id="branch" name="branch" class="required" style="" >
                                        </li>
                                    </ul>
                                </div>
                                <div class="gt_login_field">
                                    <input id="password1" type="password" name="loginPassword" class="required"  vld="{required:true,rangelength:[${site.passwordMinLen},20]}" placeholder="设置密码">
                                    <span><i class="icon-lock"></i></span>
                                </div>
                                <div class="gt_login_field">
                                    <input type="password" class="required" equalto="#password1" vld="{required:true,rangelength:[${site.passwordMinLen},20]}" placeholder="确认密码">
                                    <span><i class="icon-lock"></i></span>
                                </div>
                                <div class="gt_login_field">
                                    <input type="text" name="captcha" style="width: 50%;" class="required" placeholder="验证码">
                                    <img id="guestbookCaptcha"  class="captcha-img" alt="" src="${base}/captcha.svl">
                                    <span><i class="fa fa-hand-o-right"></i></span>
                                </div>
                                <div class="gt_login_field">
                                    <input type="text" style="width: 50%;" class="required" id="smCode" name="smCode" placeholder="短信验证码">
                                    <button id="getSmCode1" class="sm_button" onclick="return false;">获取短信验证码</button>
                                    <input type="hidden" id="validateCode" name="validateCode"/>
                                    <span><i class="fa fa-comment"></i></span>
                                </div>
                                <div class="gt_login_field">
                                    <input type="hidden" name="token"  value="${token!}" />
                                    <input type="submit" value="注册">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!--Login & Register Page Wrap End-->
</div>
<!--Jquery Library-->
<!--Bootstrap core JavaScript-->
<script src="/${res}/js/bootstrap.min.js"></script>
<style type="text/css">
    .gt_login_field .sm_button{
        width: 48%;
        height:45px;
        padding-top: 16px;
        font-size: 15px;
        margin-bottom: 15px;
    }
    .captcha-img{
        margin-left: 25px;
        vertical-align: top;
    }
    .gt_login_field input[type="password"] {
        width: 100%;
        height: 45px;
        border-radius: 50px;
        background-color: #4d4d4d;
        padding: 8px 10px 8px 60px;
        color: #f2f2f2;
        margin-bottom: 15px;
    }
    .gt_login_field .unabled{
        background-color: lightblue !important;
        color: #eee;
        cursor: default;
    }
    .error{display: inline;}
</style>
<style type="text/css">
    ._citys {width:100%; height:100%;display: inline-block; position: relative; }
    ._citys span { color: #56b4f8; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 1em; top: 10px; border: 1px solid #56b4f8; cursor: pointer; }
    ._citys0 { width: 100%; height: 34px; display: inline-block; border-bottom: 2px solid #56b4f8; padding: 0; margin: 0; }
    ._citys0 li { float:left; height:34px;line-height: 34px;overflow:hidden; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
    .citySel { background-color: #56b4f8; color: #fff !important; }
    ._citys1 { width: 100%;height:80%; display: inline-block; padding: 10px 0; overflow: auto;}
    ._citys1 a {  height: 35px; display: block; color: #666; padding-left: 6px; margin-top: 3px; line-height: 35px; cursor: pointer; font-size: 13px; overflow: hidden; }
    ._citys1 a:hover { color: #fff; background-color: #56b4f8; }
    .ui-content{
        border: 1px solid #EDEDED;
    }li{
         list-style-type: none;
     }
    #PoPy{
        width:90% !important;
        height:62% !important;
        margin-left: 20px;
        margin-right: 10px;
        background-color: white !important;
    }
</style>
[#include "../include/footer.html"/]
</body>
</html>